<template>
    <div class="message-bar">
        <span>【系统通知】这里是信息通知消息展示</span>
        <RouterLink class="more" :to="{ name: '/home' }">查看更多</RouterLink>
    </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.message-bar {
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
    padding-right: 12px;
    height: 34px;
    width: 100%;
    border-radius: var(--border-radius);
    background: var(--bg-default) url('~@/assets/image/news@2x.png') no-repeat 9px center / 14px;
    font-size: var(--font-size-small);
}

.more {
    color: var(--text-secondary);

    &:hover {
        color: var(--prmary-color);
    }
}
</style>
